<template>
  <div id="app-container">
    <div class="top">
      <el-row :gutter="12" class="sec">
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="every">
              <p>{{ user_register }}</p>
              <h3>{{ user_register_total }}</h3>
              <p>当前分类总记录数</p>
              <div class="time"><span>实时</span></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="every">
              <p>{{ article_register }}</p>
              <h3>{{ article_register_total }}</h3>
              <p>当前分类总记录数</p>
              <div class="time"><span>实时</span></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="every">
              <p>{{ page_view_name }}</p>
              <h3>{{ page_view_total }}</h3>
              <p>当前分类总记录数</p>
              <div class="time"><span>实时</span></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="hover">
            <div class="every">
              <p>{{ online_name }}</p>
              <h3>{{ online_total }}</h3>
              <p>当前分类总记录数</p>
              <div class="time"><span>实时</span></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="bottom">
      <div id="left" class="left_section"></div>
      <div id="right" class="right_section"></div>
    </div>

    <div class="zhexiantu">
         <div id="zhexiantu" class = "cen"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import format from '../../utils/format.js';
import "echarts/map/js/china.js";
import getData from "@/api/data";

export default {
  data() {
    return {
      user_register: "",
      user_register_total: 0,

      article_register: "博客发布总数",
      article_register_total: 0,

      page_view_name: "网站访问总量",
      page_view_total: 0,

      online_name: "用户在线总数",
      online_total: 0
    };
  },

  created() {
    getData.getCountData().then(
      res => {
        //console.log(res);
        this.user_register = res.data.name;
        this.user_register_total = res.data.total;
      },
      err => {
        console.log("Error:" + err);
      }
    );

    getData.getArticleCount().then(
      res => {
        //console.log(res);
        //this.article_register = "博客发布总数";
        this.article_register_total = res.data;
      },
      err => {
        console.log("Error:" + err);
      }
    );

    getData.getPageView().then(
      res => {
        //console.log(res);
        //this.page_view_name = "网站访问总量";
        this.page_view_total = res.data.browseNum;
      },
      err => {
        console.log("Error:" + err);
      }
    );

    getData.getOnlineTotal().then(
      res => {
        //console.log(res);
        //this.online_name = "用户在线总数";
        this.online_total = res.data.num;
      },
      err => {
        console.log("Error:" + err);
      }
    );

  },

  mounted() {
    this.drawMap();
    this.drawPie();
    this.drawZhexiantu();
  },

  methods: {
    drawMap() {
      getData.getProvice().then(
        res => {
          // console.log(res);

          let echart = echarts.init(document.getElementById("left"));

          let option = {
          
            backgroundColor: "whitesmoke", //背景颜色
            title: {
              text: "全国主要城市登录IP分布",
              // subtext: 'data from PM25.in',
              // sublink: 'http://www.pm25.in',
              x: "center"
            },
            legend: {
              //图例组件。
              orient: "vertical",
              y: "bottom",
              x: "right",
              data: ["pm2.5"],
              textStyle: {
                color: "#fff"
              }
            },
            //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
            visualMap: {
              min: 0, //最小值
              max: 15, //最大值
              calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
              inRange: {
                color: ["#4cb0dd", "#2d79ad", "#265da0"] //颜色
              },
              textStyle: {
                color: "lightblue"
              }
            },
            // 提示框，鼠标移入
            tooltip: {
              show: true, //鼠标移入是否触发数据
              trigger: "item", //出发方式
              formatter: "{b}-登录IP总数：{c}"
            },
            //配置地图的数据，并且显示
            series: [
              {
                name: "地图",
                type: "map", //地图种类
                map: "china", //地图类型。
                data: [
                  { name: "北京", value: res.data.data[0] },
                  { name: "天津", value: res.data.data[1] },
                  { name: "上海", value: res.data.data[2] },
                  { name: "重庆", value: res.data.data[3] },
                  { name: "河北", value: res.data.data[4] },
                  { name: "河南", value: res.data.data[5] },
                  { name: "云南", value: res.data.data[6] },
                  { name: "辽宁", value: res.data.data[7] },
                  { name: "黑龙江", value: res.data.data[8] },
                  { name: "湖南", value: res.data.data[9] },
                  { name: "安徽", value: res.data.data[10] },
                  { name: "山东", value: res.data.data[11] },
                  { name: "新疆", value: res.data.data[12] },
                  { name: "江苏", value: res.data.data[13] },
                  { name: "浙江", value: res.data.data[14] },
                  { name: "江西", value: res.data.data[15] },
                  { name: "湖北", value: res.data.data[16] },
                  { name: "广西", value: res.data.data[17] },
                  { name: "甘肃", value: res.data.data[18] },
                  { name: "山西", value: res.data.data[19] },
                  { name: "内蒙古", value: res.data.data[20] },
                  { name: "陕西", value: res.data.data[21] },
                  { name: "吉林", value: res.data.data[22] },
                  { name: "福建", value: res.data.data[23] },
                  { name: "贵州", value: res.data.data[24] },
                  { name: "广东", value: res.data.data[25] },
                  { name: "青海", value: res.data.data[26] },
                  { name: "西藏", value: res.data.data[27] },
                  { name: "四川", value: res.data.data[28] },
                  { name: "宁夏", value: res.data.data[29] },
                  { name: "海南", value: res.data.data[30] },
                  { name: "台湾", value: res.data.data[31] },
                  { name: "香港", value: res.data.data[32] },
                  { name: "澳门", value: res.data.data[33] },
                  { name: "南海诸岛", value: res.data.data[34] }
                ],
                itemStyle: {
                  //地图区域的多边形 图形样式。
                  emphasis: {
                    //高亮状态下的样试
                    label: {
                      show: true
                    }
                  }
                },
                zoom: 1, //放大比例
                label: {
                  //图形上的文本标签，可用于说明图形的一些数据信息
                  show: true
                }
              },
              {
                type: "scatter",
                showEffectOn: "render", //配置什么时候显示特效
                coordinateSystem: "geo", //该系列使用的坐标系
                symbolSize: 10, //标记的大小
                data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],
                zlevel: 99999
              }
            ]
          };

          echart.setOption(option);
        },
        err => {
          console.log("Error:" + err);
        }
      );
    },

    drawPie() {
      getData.getPie().then(
        res => {
          console.log(res.data);

          let num = [];

          for(let key in res.data){
              let obj = {value:res.data[key],name:key};
              num.push(obj);
          }

          let echart = echarts.init(document.getElementById("right"));

          let option = {
            backgroundColor: "whitesmoke", //背景颜色
            aria: {
              enabled: true
            },
            title: {
              text: "博客类型数目统计",
              left: "center"
            },
            tooltip: {
              show: true, //鼠标移入是否触发数据
              trigger: "item", //出发方式
              formatter: "{a} <br/>{b} : {c} <br/>{d}%"
            },
            series: [
              {
                name: "博客比例",
                type: "pie",
                radius: "50%",
                data: num
              }
            ]
          };

          echart.setOption(option);
        },
        err => {
          console.log("Error:" + err);
        }
      );
    },

    drawZhexiantu() {
      getData.getLineData(format()).then(res => {
        console.log( res);
        let echart = echarts.init(document.getElementById("zhexiantu"));

        let option = {
          backgroundColor: "whitesmoke", //背景颜色
          title: {
              text: "博客数据分析表",
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['文章数', '注册数']
          },
          toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
          },
          calculable: true,
          xAxis: {
            type: 'category',
            boundaryGap: false, //取消左侧的间距
            data: res.data.dateList
          },
          yAxis: {
            splitLine: { show: false },//去除网格线
            type: 'value',
          },
          series: [{
            name: '文章数',
            type: 'line',
            symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: res.data.articleNumList
           },
           {
            name: '注册数',
            type: 'line',
            symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            data: res.data.registerNumList
           }
          ]

        }

        echart.setOption(option);
      },err => {
        console.log('Error:' + err);
      })
    }
  }
};
</script>

<style scoped>
#app-container {
  /* background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
    font-family: "montserrat";
    background-size: 400%;
    animation: test 15s infinite; */
  width: 100%;
  /* height: 100vh; */
  /* background-color: lightgray; */
}
@keyframes test {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
/* 展示具体数据 */
.top {
  margin-top: 10px;
  width: 100%;
  height: 20vh;
}
.top .sec {
  display: flex;
  justify-content: space-around;
}
.top .sec .every {
  width: 8vw;
  height: 8vh;
  position: relative;
  flex-direction: row;
}
.top .sec .every p {
  margin-top: -10px;
  font-weight: 300;
  font-size:xx-small;
}
.top .sec .every .time {
  width: 30px;
  height: 20px;
  top: 8px;
  left: 220px;
  position: absolute;
  background-color: lightgrey;
  text-align: center;
  border-radius: 3px;
}
.top .sec .every .time span {
  font-size: small;
  color: black;
  font-weight: 600;
}

/* 展示折线图 */
.zhexiantu{
  width:100%;
  height:60vh;
  display: flex;
  justify-content:center;
  /* background-color: red; */
  margin-bottom:10vh;
}

.zhexiantu .cen{
  width:95%;
  height:60vh;
}

/* 中间部分 */
.bottom {
  width: 100%;
  height: 60vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
/* 展示地图 */
.bottom .left_section {
  /* background-color: red; */
  width: 70%;
  height: 50vh;
  border-radius: 3px;
  /* border:1px solid gray; */
}
/* 展示饼状图 */
.bottom .right_section {
  /* background-color: #00ffff; */
  width: 25%;
  height: 50vh;
  border-radius: 5px;
  /* border-radius:10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
</style>
